<template>
  <view class="tab-page group">
    <view class="group-items">
      <scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
        <uni-swipe-action>
          <view class="xw-book-wrapper">
            <view class="xw-book-sort">他管理的圈子</view>
          </view>
          <uni-swipe-action-item class="favorites-uni-swipe-action-item" v-for="(circle,i) in myCircles"
                                 :key="i">
            <circle-item :today-add="circle.todayAdd" :circle="circle"></circle-item>
          </uni-swipe-action-item>

          <view class="xw-book-wrapper" v-if="joinedGroups.length > 0">
            <view class="xw-book-sort">他加入的圈子</view>
          </view>
          <uni-swipe-action-item class="favorites-uni-swipe-action-item"
                                 v-for="(circle,i) in joinedGroups" :key="i">
            <circle-item :today-add="circle.todayAdd" :circle="circle"></circle-item>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </view>

  </view>
</template>

<script>
import CircleItem from "../../components/circle-item/circle-list.vue";
import http from '../../common/request';
import UniSwipeActionItem
  from "@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue";

export default {
  components: {UniSwipeActionItem, CircleItem},
  data() {
    return {
      myCircles: [],
      joinedGroups: []
    }
  },
  methods: {
    // loadCircle(userId) {
    //   return new Promise((resolve, reject) => {
    //     this.loading = true
    //     http({
    //       url: `/circle/user-circle?userId=${userId}`,
    //       method: 'GET',
    //     }).then((res) => {
    //       this.myCircles = res.myCircles;
    //       this.joinedGroups = res.joinedGroups;
    //       resolve();
    //       this.loading = false
    //     }).catch((res) => {
    //       reject(res);
    //       this.loading = false
    //     })
    //   });
    // },
  },

  computed: {
    mine() {
      return this.userStore.userInfo;
    },
  },

  onLoad(options) {
    //this.loadCircle(options.id)
  },

}
</script>

<style lang="scss" scoped>
.xw-book-wrapper {
  padding: 10rpx 0 10rpx;
  display: flex;
  width: 100%;
}

.xw-book-sort {
  padding: 0 24rpx;
  flex: 1;
  line-height: 60rpx;
  background-color: #fafafa;
  font-size: 26rpx;
}

.group {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .nav-bar {
    padding: 2rpx 10rpx;
    display: flex;
    align-items: center;
    background-color: white;

    .nav-search {
      flex: 1;
    }

    .nav-add {
      cursor: pointer;
    }
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    padding: 0;
    border: #dddddd solid 1px;
    overflow: hidden;
    position: relative;

    .scroll-bar {
      height: 100%;
    }
  }
}

.favorites-wx-view {
  background-color: #00aaff;
}

.favorites-wx-delete {
  background-color: #F76260;
}

.favorites-wx-quit {
  background-color: #FFBE00;
}

.favorites-wx-action-item-btn {
  color: #fff;
  padding: 0 44rpx;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.favorites-wx-action-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.favorites-uni-swipe-action-item {
  margin-bottom: 2rpx;
}

.favorites-uni-swipe-action-item:nth-last-child(1) {
  margin-bottom: 0;
}

.favorites-wx-tips {
  width: 100%;
  color: #999;
  font-size: 24rpx;
  text-align: center;
}
</style>